<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-select
        v-model="sitenum"
        :clearable="true"
        :filterable="true"
        placeholder="请选择站点"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in sitelist"
          :label="item.siteName"
          :key="item.index"
          :value="item.siteNo"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="sub">查询</el-button>
    </div>
    <div class="bar_box">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="通道区域">
      <div class="select_box">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="margin-left: 20px"
        >
          <el-tab-pane v-for="item in arr2" :key="item.index" :label="item">
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName1" class="choose" @tab-click="handleClick1">
          <el-tab-pane
            v-for="item in arr3"
            :key="item.index"
            :label="item.aisleName"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="date" v-if="dateshow">
        <el-date-picker
          popper-class="test"
          @change="getcharge"
          v-model="date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>
      <div class="status" v-if="statushow">
        <el-radio v-model="status" label="1">实时</el-radio>
        <el-radio v-model="status" label="2">离线</el-radio>
      </div>
      <div class="bar_chart"></div>
      <div class="asile-echart" v-show="loading">
        <dv-loading></dv-loading>
      </div>
      </dv-border-box-11>
    </div>
  </div>
</template>
<script>
import Search from "../../common/select";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  components: {
    Search,
  },
  data() {
    return {
      message: {},
      sitelist: [],
      statushow: false,
      dateshow: false,
      loading: false,
      date: "",
      radio: "",
      status: "1",
      sitenum: "",
      activeName: "",
      activeName1: "",
      timer: 30, //默认时间
      interval: "", //定时器
      series: [],
      arr: [],
      newarr: [],
      warehouseExtent: "",
      cabinetExtent: "",
      lineExtent: "",
      list: [],
      arr2: ["电池仓", "充电柜", "线槽"],
      arr3: [],
      $chart1: "",
      index: 1,
      min: "",
      max: "",
      option: {
        backgroundColor: "transparent",
        color: [
          "grey",
          "gold",
          "darkviolet",
          "turquoise",
          "darkorange",
          "lightgreen",
          "plum",
          "tan",
          "khaki",
          "pink",
          "skyblue",
          "lawngreen",
          "salmon",
          "#FFC0CB",
          "#4B0082",
          "#00008B",
          "#F8F8FF",
          "#9370DB",
          "#DC143C",
          "#D8BFD8",
        ],
        legend: {
          width: "70%",
          left: 50,
          data: [
            "测温点1",
            "测温点2",
            "测温点3",
            "测温点4",
            "测温点5",
            "测温点6",
            "测温点7",
            "测温点8",
            "测温点9",
            "测温点10",
            "测温点11",
            "测温点12",
            "测温点13",
            "测温点14",
            "测温点15",
            "测温点16",
            "测温点17",
            "测温点18",
            "测温点19",
            "测温点20",
          ],
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(19,36,82,0.8)",
          padding: [20, 20],
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            splitArea: {
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
              show: true,
              interval: "auto",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
                type: "dashed",
              },
            },
            axisLine: {
              lineStyle: {
                width: 0,
              },
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [],
      },
    };
  },
  watch: {
    status: {
      handler(newVal) {
        if (newVal == "2") {
          this.show = false;
          this.dateshow = true;
          clearInterval(this.interval);
          this.interval = null;
        }
        if (newVal == "1") {
          this.show = true;
          this.dateshow = false;
          this.date = "";
          this.gettemp();
          this.interval = setInterval(this.gettemp, 30000);
        }
      },
      // immediate: true,
    },
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
      this.getsitelist();
    },
    //查询
    sub() {
      if (!this.sitenum) {
        return;
      }
      if (!this.statushow) {
        this.statushow = true;
      }
      this.getchannel();
      if (this.status == "1") {
        this.gettemp();
      }
      if (this.status == "2") {
        this.getcharge();
      }
    },
    //tab切换
    handleClick(tab) {
      if (tab.label.includes("电池仓")) {
        this.arr3 = this.list.slice(0, Number(this.warehouseExtent));
      }
      if (tab.label.includes("充电柜")) {
        this.arr3 = this.list.slice(
          Number(this.warehouseExtent),
          Number(this.cabinetExtent)
        );
      }
      if (tab.label.includes("线槽")) {
        this.arr3 = this.list.slice(
          Number(this.cabinetExtent),
          Number(this.lineExtent)
        );
      }
    },
    handleClick1(tab) {
      this.list.map((item) => {
        if (tab.label == item.aisleName) {
          this.index = item.index;
        }
      });
      if (this.status == "1") {
        this.gettemp();
      }
      if (this.status == "2") {
        this.getcharge();
      }
    },
    //获取站点列表
    getsitelist() {
      let param = {
        provinceCode: this.message.provincecode,
        cityCode: this.message.citycode,
        districtCode: this.message.districtcode,
      };
      this.$http
        .post("/site/device/select", param)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sitelist = res.data.b;
          }
        })
        .catch((err) => {});
    },
    //获取温度数据
    gettemp() {
      this.loading = true;
      let params = {
        deviceNo: this.sitenum,
        duration: this.timer,
        index: this.index,
      };
      this.$http
        .post("/redis/getPointDate", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.$chart1.setOption(this.option);
            this.newarr = [];
            this.series = [];
            for (var i = 0; i < 20; i++) {
              this.newarr.push([]);
            }
            //取数组的最大值和最小值
            let bigarr = res.data.b.data.join(",").split(",").filter(Boolean);
            this.max = Math.ceil(Math.max.apply({}, bigarr));
            this.min = Math.floor(Math.min.apply({}, bigarr));
            res.data.b.data.map((item, index) => {
              item.map((i, ind) => {
                if (!i) {
                  this.newarr[ind].push("");
                } else {
                  this.newarr[ind].push(i);
                }
              });
            });
            for (let n = 0; n < this.newarr.length; n++) {
              this.series.push({
                name: "测温点" + Number(n + 1),
                data: this.newarr[n],
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "circle",
              });
            }
            this.loading = false;
            this.$chart1.setOption({
              dataZoom: [
                {
                  show: false,
                },
              ],
              xAxis: [
                {
                  data: res.data.b.time,
                },
              ],
              yAxis: [
                {
                  min: this.min,
                  max: this.max,
                },
              ],
              series: this.series,
            });
          }
        })
        .catch((err) => {});
    },
    //获取充电数据
    getcharge() {
      this.loading = true;
      let siteId = this.sitenum;
      let year = this.date.split("-")[0];
      let month = this.date.split("-")[1];
      let day = this.date.split("-")[2];
      this.$http
        .get(`/redis/offline/${year}/${month}/${day}/${siteId}/${this.index}`)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.series = [];
            //取数组的最大值和最小值
            let bigarr = res.data.b.temps.join(",").split(",").filter(Boolean);
            this.max = Math.ceil(Math.max.apply({}, bigarr));
            this.min = Math.floor(Math.min.apply({}, bigarr));
            for (let n = 0; n < res.data.b.temps.length; n++) {
              this.series.push({
                name: "测温点" + Number(n + 1),
                data: res.data.b.temps[n],
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "circle",
              });
            }
            this.loading = false;
            this.$chart1.setOption({
              dataZoom: [
                {
                  type: "slider",
                  show: true,
                  startValue: 0,
                  endValue: 100,
                  zoomLock: true,
                  textStyle: { color: "#fff" },
                },
              ],
              xAxis: [
                {
                  data: res.data.b.times,
                },
              ],
              yAxis: [
                {
                  min: this.min,
                  max: this.max,
                },
              ],
              series: this.series,
            });
          }
        });
    },
    //获取通道列表
    getchannel() {
      let siteId = this.sitenum;
      this.$http.get(`/site/device/siteAisles/${siteId}`).then((res) => {
        if (res.data.h.code == 0) {
          this.arr2 = ["电池仓", "充电柜", "线槽"];
          this.warehouseExtent =
            res.data.b.warehouse[res.data.b.warehouse.length - 1].index;
          this.cabinetExtent =
            res.data.b.cabinet[res.data.b.cabinet.length - 1].index;
          this.lineExtent = res.data.b.line[res.data.b.line.length - 1].index;
          this.arr2[0] =
            this.arr2[0] +
            "(" +
            res.data.b.warehouse[0].index +
            "~" +
            `${this.warehouseExtent}` +
            ")";
          this.arr2[1] =
            this.arr2[1] +
            "(" +
            res.data.b.cabinet[0].index +
            "~" +
            `${this.cabinetExtent}` +
            ")";
          this.arr2[2] =
            this.arr2[2] +
            "(" +
            res.data.b.line[0].index +
            "~" +
            `${this.lineExtent}` +
            ")";
          this.list = res.data.b.warehouse.concat(
            res.data.b.cabinet,
            res.data.b.line
          );
          this.setarr();
        }
      });
    },
    //折线图初始化
    initbox() {
      this.$chart1 = this.$echarts.init(document.querySelector(".bar_chart"));
    },
    //渲染折线图
    initbar() {
      this.$chart1.setOption(this.option);
    },
    setarr() {
      this.arr3 = this.list.slice(0, Number(this.warehouseExtent));
    },
  },
  created() {
    this.getsitelist();
    if (this.sitenum != "") {
      this.sub();
    }
  },
  mounted() {
    this.initbox();
    var erd = elementResizeDetectorMaker();
    erd.listenTo(
      document.querySelector(".bar_chart"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.querySelector(".bar_chart")).resize();
        });
      }.bind(this)
    );
  },
  beforeDestroy() {
    clearInterval(this.interval);
    this.interval = null;
  },
};
</script>
<style scoped>
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.bar_box {
  position: relative;
  box-sizing: border-box;
  height: 84vh;
}
.select_box {
  box-sizing: border-box;
  overflow: hidden;
}
.bar_box h1 {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  margin-top: 20px;
}
.asile-echart {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.bar_chart {
  margin-top: 20px;
  width: 100%;
  min-height: 570px;
}
.select_box {
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.el-tabs__nav-wrap .is-scrollable .is-top {
  overflow: auto !important;
}
.el-tabs {
  margin-top: 20px;
}
.el-tabs__header {
  margin: 0 !important;
}
.el-tabs /deep/ .el-tabs__active-bar {
  background-color: transparent !important;
  height: 0 !important;
}
.el-tabs /deep/.el-tabs__item {
  padding: 0 20px !important;
  text-align: center;
  margin-right: 10px;
  color: #fff;
  height: 32px;
  line-height: 32px;
  border: 1px solid rgba(19, 81, 156, 1);
  background: #043266;
  border-radius: 5px;
}
.el-tabs /deep/.el-tabs__item.is-active {
  color: rgba(0, 255, 255, 1);
  border: 1px solid rgba(19, 81, 156, 1);
}
.el-tabs >>> .el-tabs__nav-wrap::after {
  height: 0 !important;
}
.status {
  height: 40px;
  line-height: 40px;
  position: absolute;
  clear: both;
  top: 150px;
  right: 230px;
  z-index: 1;
  border-radius: 5px;
  padding: 5px;
}
.status /deep/ .el-radio span {
  color: rgba(184, 222, 255, 1);
}
.timer {
  width: 350px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  clear: both;
  top: 180px;
  right: 20px;
  z-index: 1;
  border-radius: 5px;
  padding: 5px;
  color: rgba(184, 222, 255, 1);
}
.date {
  position: absolute;
  clear: both;
  top: 200px;
  right: 150px;
  z-index: 1;
  border-radius: 5px;
  padding: 5px;
  color: rgba(184, 222, 255, 1);
}
.date /deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
}
.test {
  background-color: transparent !important;
  color: #fff !important;
}
.timer span {
  display: inline-block;
  float: left;
  margin-right: 10px;
}
.timer /deep/ .el-radio-button__inner {
  border: 0;
  color: rgba(184, 222, 255, 1);
  background: transparent;
  box-shadow: none;
}
.timer .el-radio-button__inner {
  border: 0;
  color: rgba(184, 222, 255, 1);
  background: transparent;
  box-shadow: none;
}
</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
.test {
  background-color: rgba(19, 81, 156, 1);
  color: #fff !important;
}
.test .el-date-picker__header-label {
  color: #fff !important;
}
.test .el-picker-panel__icon-btn {
  color: #fff !important;
}
.el-date-table th {
  color: #fff !important;
}
.test .el-input__inner {
  background-color: transparent;
}
</style>
